<!--
//
// Trigger.vue
// vue3-element-admin
//
// Created by 区区电脑 on 2023/04/10.
//
-->
<template>
    <div class="Index">
        <!-- 标题和筛选区 -->
        <table-search-bar :config="{}" :model="{}" hide-search title="行政区划管理"/>
        <!--  内容  -->
        <div class="container">
            <!-- 功能按钮 -->
            <div class="table-buttons">
                <el-button v-permission="permission.add" type="primary" @click="addData"><b-icon name="bi-plus" size="20"/>添加</el-button>
            </div>
            <!--checkbox设置 :checkbox-config="{trigger: 'row', highlight: true}" -->
            <!--radio设置 :radio-config="{trigger: 'row', highlight: true}" -->
            <vxe-table
                    ref="VXETable"
                    :column-config="{ resizable: false}"
                    :data="state.list"
                    :loading="state.isLoading"
                    :radio-config="{trigger: 'row', highlight: true}"
                    :row-config="{isCurrent: true, isHover: true, keyField: 'code'}"
                    :tree-config="{childrenField: 'children', reserve: true}"
                    border
                    round
                    show-overflow
                    size="small"
                    @current-change="() => {}"
                    @radio-change="() => {}"

            >
                <template #empty>
                    <el-empty :image-size="100"/>
                </template>
                <vxe-column fixed="left" title="#" type="seq" width="50"/>
                <vxe-column align="left" field="name" :fixed="$fixedColumn('left')" min-width="200" title="区划名称" treeNode></vxe-column>
                <vxe-column field="code" min-width="100" title="区划编号"></vxe-column>
                <vxe-column field="level" min-width="80" title="区划类别">
                    <template #default="{row}">
                        <el-tag v-if="row.level===1">市</el-tag>
                        <el-tag v-if="row.level===2" type="success">区/县</el-tag>
                        <el-tag v-if="row.level===3" type="warning">镇/街道</el-tag>
                    </template>
                </vxe-column>
                <vxe-column :resizable="false" field="action" title="操作" :width="$widthColumn(150)">
                    <template #default="{row}">
                        <table-action :actions="[
                            {title: '修改', permission: permission.edit, type: 'primary', ok: editData},
                            {title: '删除', permission: permission.delete, type: 'danger', ok: deleteData, confirm: '您确定要删除当前数据么?'},
                            {title: '添加下级', show: row.level < 3, permission: permission.add, type: 'primary', ok: addSubData, inMore: true},
                        ]" :data="row"/>
                    </template>
                </vxe-column>
            </vxe-table>
        </div>
    </div>
    <EditForm ref="editForm"/>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import * as api from "./api.js";
import EditForm from "./EditForm.vue";

const {$message, $fixedColumn, $widthColumn} = window;

// 路由
const router = useRouter();
// store
const store = useStore();

// 响应式数据
const state = reactive({
    // 表格刷新
    isLoading: false,
    // 表格数据源
    list: []
})
// 当前页面需要的功能权限
const permission = {
    add: "BaseArea:AddAreaInfo",
    delete: "BaseArea:DeleteAreaInfo",
    edit: "BaseArea:UpdateAreaInfo"
}

const editForm = ref();

// 添加
function addData() {
    editForm.value.show({
        title: "添加",
        options: {level: 1},
        ok() {
            loadList()
        }
    })
}

// 删除
async function deleteData({code}) {
    const {success} = await api.DeleteAreaInfo({code});
    if (!success) return;
    $message.success("删除成功");
    loadList()
}

// 修改
function editData(row) {
    editForm.value.show({
        title: "修改",
        options: {...row},
        ok() {
            loadList()
        }
    })
}

// 添加下级
function addSubData(row) {
    editForm.value.show({
        title: "添加下级",
        options: {pCode: row.code, level: (row.level || 1) + 1},
        ok() {
            loadList()
        }
    })
}

// 查询列表
const VXETable = ref()
async function loadList() {
    state.isLoading = true
    const {success, data} = await api.GetAreaTree();
    state.isLoading = false
    if (!success) return;
    state.list = data;

}

// 复制
function setCopy(text) {
    window.$copyText(text)
}


onMounted(() => {
    loadList()
})
</script>

<style lang="scss" scoped>
.Index {
    margin: 10px;
    width: calc(100% - 20px);
    box-sizing: border-box;

    .container {
        padding: 10px;
        background: #fff;
        margin-top: 10px;
        box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.1);
    }
}
</style>
